<template>
<div style="width: 70%">
    <div style="margin-bottom: 30px">编辑旅游景点</div>
    <el-form :inline="true" :model="form" label-width="120px">
        <el-form-item label="名称" prop="name" >
            <el-input v-model="form.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="简介"  prop="introduce">
            <el-input style="width: 1000px" type="textarea"  autosize v-model="form.introduce" placeholder="请输入简介"></el-input>
        </el-form-item>
      <el-form-item label="正文"  prop="body"  >
        <el-input     style="width: 1000px" type="textarea"  autosize  v-model="form.body" placeholder="请输入正文"></el-input>
      </el-form-item>
      <el-form-item label="地址"  prop="addr"  >
        <el-input     style="width: 1000px" type="textarea"  autosize  v-model="form.addr" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-form-item label="头像" prop="photo">
        <el-upload
            class="avatar-uploader"
            :action="'http://localhost:9090/api/file/upload?token=' + this.admin.token"
            :show-file-list="false"
            :on-success="handleCoverSuccess"
            :on-change="onChange"
        >
          <img v-if="form.photo" :src="form.photo " class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

    </el-form>
    <div style="text-align: center  ;margin-top:5px ">
        <el-button type="primary" @click="update" size="medium">提交</el-button>
        <el-button type="info" @click="$router.push('/TravelBackground')" size="medium">返回</el-button>
    </div>
</div>
</template>

<script>
    import request from "@/util/request";
    import Cookies from "js-cookie";
    export default {

        name: "EditBook",
        data(){
            return{
              admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {},
              form:{
                photo:''
              },
            }
        },
        created() {
            const id=this.$route.query.id
            request.get("/travel/"+id).then(res=>{
                this.form=res.data

            })
        },
        methods:{
           onChange (file) {
        if(file){
          const suffix = file.name.split('.')[1]
          const size = file.size / 1024 / 1024 < 2
          if(['png','jpeg','jpg'].indexOf(suffix) < 0){
            this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
            this.$refs.upload.clearFiles()
            return false
          }
          if(!size){
            this.$message.error('上传文件大小不能超过 2MB!')
            return false
          }
          return file
        }
      },
          handleCoverSuccess(res) {
            if (res.code === '200') {
              console.log(res.data)
              // this.$set(this.form, 'cover', res.data)
              this.form.photo = res.data
            }
          },
            update(){
                request.put("/travel/update",this.form).then(res=>{
                    if (res.code=="200"){
                        this.$notify.success("修改成功")
                        this.$router.push("/TravelBackground")
                    }else{
                        this.$notify.error(res.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
